<template>
  <div>
    <!-- 功能按钮 -->
    <FunctionButton :permissions="editPermissions()" :add="add" :exports="exports"></FunctionButton>
    
    <!-- 表格 -->
    <el-table
      :data="list"
      style="width: 100%"
      :header-cell-style="headStyle"
      :cell-style="rowStyle"
      row-key="uuid"
      :tree-props="
        children == undefined
          ? { children: 'children', hasChildren: 'hasChildren' }
          : { children: children, hasChildren: 'hasChildren' }
      "
    >
      <slot v-for="field in fields">
        <!-- 原样展示 -->
        <el-table-column
          :prop="field.value"
          :label="field.label"
          v-if="!field.type"
        ></el-table-column>

        <!-- 图标展示 -->
        <el-table-column
          :prop="field.value"
          :label="field.label"
          v-if="field.type == 'icon'"
        >
          <template slot-scope="scope">
            <p class="table_icon_box" v-html="scope.row[field.value]"></p>
          </template>
        </el-table-column>
        
        <!-- 字典 -->
        <el-table-column
          :prop="field.value"
          :label="field.label"
          v-if="field.type == 'dict'"
        >
          <template slot-scope="scope">
            <span v-for="d in field.dict" v-if="scope.row[field.value]==d.value">{{d.label}}</span>
          </template>
        </el-table-column>
      </slot>

      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <slot name="beforeButtonSlot" :row="scope.row"></slot>
          <el-tooltip content="编辑" class="operatingButton">
            <el-link
              type="primary"
              icon="el-icon-edit-outline"
              :underline="false"
              v-if="permissions.update"
              @click="edit(scope.row.uuid)"
            ></el-link>
          </el-tooltip>
          <el-tooltip content="删除" class="operatingButton">
            <el-popconfirm
              title="是否确认删除这条记录？"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="del(scope.row.uuid)"
              v-if="permissions.delete"
            >
              <el-link
                type="danger"
                icon="el-icon-delete-solid"
                :underline="false"
                slot="reference"
              ></el-link>
            </el-popconfirm>
          </el-tooltip>
          <slot name="buttonSlot" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
  
</template>

<script>
export default {
  props: ["list", "fields", "permissions", "add", "children", "edit", "del", "exports"],
  mounted() {},
  methods: {
    editPermissions(){
      let permissions = this.$utils.deepCopy(this.permissions);
      permissions["delete"] = false;
      return permissions;
    },
    // 表头样式
    headStyle() {
      // return "text-align:center;background:rgb(248,248,249)";
      return "background:rgb(248,248,249)";
    },
    // 单元格样式
    rowStyle() {
      // return "text-align:center";
    },
  },
};
</script>

<style lang="less">
.table_icon_box{
  height: 23px;
  svg{
    width: 23px;
    height: 23px;
  }
}
.operatingButton{
  margin: 0 5px;
}
</style>